<template>
  <div>
    <div class="header">
      <div class="header_top">
        <img src="../../assets/images/返回.png" @click="fanhui" alt="" />
        <div style="color: #fff">新增拜访信息</div>
        <img src="../../assets/images/fanhuishouye.png" alt="" />
      </div>
    </div>
    <van-form>
      <van-field
        v-model="username"
        label="客户名称"
        style="margin-bottom: 20px"
        required
        @click="btn"
      />
      <van-field v-model="title" label="拜访标题" required />
    </van-form>
    <van-field
      :value="value"
      label="拜访原因"
      @click="showPicker = true"
      required
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      name="datetimePicker"
      :value="value4"
      label="拜访时间"
      required
      @click="showPicker4 = true"
    />
    <van-popup v-model="showPicker4" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :columns-order="['year', 'month', 'day']"
        :formatter="formatter"
        @confirm="onConfirm4"
        @cancel="showPicker4 = false"
      />
    </van-popup>

    <van-field
      v-model="message"
      rows="2"
      autosize
      label=" 拜访地址"
      type="textarea"
      maxlength="50"
      required
      show-word-limit
      style="margin-bottom: 20px"
    />
    <van-field
      v-model="message1"
      rows="2"
      autosize
      label=" 拜访情况"
      type="textarea"
      required
      maxlength="50"
      show-word-limit
      style="margin-bottom: 20px"
    />
    <van-field
      v-model="message2"
      rows="2"
      autosize
      label=" 竞争信息收集情况"
      type="textarea"
      maxlength="50"
      show-word-limit
    />
    <div>
      <van-button round block type="info" @click="onBtn">保存</van-button>
    </div>
  </div>
</template>

<script>
import { visitXZ } from "../../request/api";
export default {
  data() {
    return {
      id: "",
      username: "",
      value: "",
      title: "",
      columns: ["列行走访", "售中支撑", "售前支撑", "售后服务"],
      showPicker: false,
      value4: "",
      currentDate: new Date(),
      showPicker4: false,
      message: "",
      message1: "",
      message2: "",
    };
  },
  methods: {
    onBtn() {
      let custId = this.id;
      let custName = this.username;
      let visitTime = this.value4;
      let visitAddress = this.message;
      let visitTitle = this.title;
      let visitReason = this.value;
      let visitSituation = this.message1;
      let collectSituation = this.message2;
      console.log(
        custId,
        custName,
        visitTime,
        visitAddress,
        visitTitle,
        visitReason,
        visitSituation,
        collectSituation
      );
      console.log(
        typeof custId,
        typeof custName,
        typeof visitTime,
        typeof visitAddress,
        typeof visitTitle,
        typeof visitReason,
        typeof visitSituation,
        typeof collectSituation
      );
      visitXZ({
        custId,
        custName,
        visitTime,
        visitAddress,
        visitTitle,
        visitReason,
        visitSituation,
        collectSituation,
      }).then((res) => {
        if (res.errCode == 0) {
          this.$router.push("/home/funindex/customers/");
        }
      });
    },
    onConfirm4(time) {
      console.log(time);
      const d = new Date(time);
      let year = d.getFullYear(); //年
      let month = d.getMonth() + 1; //月
      let day = d.getDate(); //日
      let hours = d.getHours(); //时
      let minutes = d.getMinutes(); //分
      let senc = d.getSeconds(); //秒
      month = month < 10 ? "0" + month : (month = month);
      day = day < 10 ? "0" + day : (day = day);
      hours = hours < 10 ? "0" + hours : (hours = hours);
      minutes = minutes < 10 ? "0" + minutes : (minutes = minutes);
      senc = senc < 10 ? "0" + senc : (senc = senc);

      let resDate = `${year}-${month}-${day} ${hours}:${minutes}:${senc}`;
      this.value4 = resDate;
      this.showPicker4 = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    fanhui() {
      this.$router.push("/home/funindex/customerCare/");
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    btn() {
      this.$router.push("/visitKH/");
    },
  },
  created() {
    this.username = this.$route.query.name;
    this.id = this.$route.query.id;
    console.log(this.username, this.id);
  },
};
</script>
 
<style lang = "less" scoped>
.header {
  width: 100%;
  background: #1f3484;
  .header_top {
    padding: 31px 12px 15px;
    height: 22px;
    display: flex;
    justify-content: space-between;
    img {
      height: 100%;
    }
  }
}
.el-form {
  background: #fff;
}
/deep/.el-input__inner {
  border: none;
  outline: none;
  width: 100%;
}
</style>